<template> <!-- 设置 -->
	<view class="wrap">
		<view class="layout layout-feedback">
			<view class="feelback-box bg-white">
				<view class="group flex align-center" @click="isPicker = true">
					<view class="label">反馈类型</view>
					<view class="text text-right flex-1 m-right-10">{{ pickValue }}</view>
					<u-icon name="arrow-down" color="#415058" size="20"></u-icon>
				</view>
				<u-line color="#bbb"></u-line>
				<view class="centerbox">
					<u-input v-model="formData.content"  type="textarea" :border="true" :height="200" :auto-height="true"
						placeholder="请填写问题描述以便我们提供更好的帮助......" />
					<view class="limit text-right m-top-10">200字以内</view>
					<view class="upload-title m-top-30">截图<text class="xt">(选填)</text></view>
					<view class="uploadbox flex justify-start m-top-20">
						<view class="image-list">
							<view class="image-preview" v-for="(image, imageIndex) in imageList"
								:key="imageIndex">
								<text class="image-delete iconfont icon-shanchu"
									@click="deleteImage(imageIndex)"></text>
								<image class="image" mode="aspectFill" :src="image.path"></image>
							</view>
							<view v-if="!imageList || imageList.length < maxImageLength"
								class="image-picker" @click="chooseImage()">
								<text class="choose-icon iconfont icon-camera"></text>
								<text class="choose-text">上传图片</text>
							</view>
						</view>
					</view>
				</view>
				<u-line color="#bbb"></u-line>
				<view class="group flex align-center">
					<view class="label">联系方式</view>
					<view class="flex-1">
						<input class="input" type="text" v-model="formData.mobile" placeholder="请输入手机号/邮箱">
					</view>
				</view>
			</view>
			<view class="btnbox">
				<!-- <u-button :custom-style="resultBtn" shape="circle">提 交</u-button> -->
				<view class="feedback-btn" :class="{ disabled }" @click="handleSubmit()">提 交</view>
			</view>
		</view>
		<!-- 选择器 -->
		<u-picker mode="selector" v-model="isPicker" :range="pickerList" range-key="label"
			:default-selector="[numberIndex]" @cancel="isPicker=false" @confirm="handPick"></u-picker>
	</view>
</template>

<script>
	import * as UploadApi from '@/api/upload'
	import * as FeedbackApi from '@/api/dati/feedback'

	const maxImageLength = 3
	export default {
		data() {
			return {
				// 表单数据
				formData: {content:'',mobile:''},
				imageList:[],
				// 最大图片数量
				maxImageLength,
				resultBtn: {
					color: '#ffffff',
					background: '#0197F8',
				},
				textareaValue: '',
				inputValue: '',
				isPicker: false,
				numberIndex: 0,
				pickerList: [{
						id: 1,
						label: '功能异常',
					},
					{
						id: 2,
						label: '建议优化',
					},
				],
				pickValue: '功能异常',
			}
		},
		methods: {

			// 选择图片
			chooseImage() {
				const app = this
				const oldImageList = app.imageList
				// 选择图片
				uni.chooseImage({
					count: maxImageLength - oldImageList.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success({
						tempFiles
					}) {
						// tempFiles = [{path:'xxx', size:100}]
						app.imageList = oldImageList.concat(tempFiles)
					}
				});
			},

			// 删除图片
			deleteImage(imageIndex) {
				this.imageList.splice(imageIndex, 1)
			},
			// 表单提交
			handleSubmit() {
				const app = this
				if(app.formData.content==''){
						app.$toast('请填写反馈内容')
						return false
				}
				if(app.formData.mobile==''){
						app.$toast('请填写联系方式')
						return false
				}
				// 判断是否重复提交
				if (app.disabled === true) return false
				// 按钮禁用
				app.disabled = true
				// 判断是否需要上传图片
				const imagesLength = app.getImagesLength()
				if (imagesLength > 0) {
					app.uploadFile()
						.then(() => {
							console.log('then')
							app.onSubmit()
						})
						.catch(err => {
							console.log('catch')
							app.disabled = false
							if (err.statusCode !== 0) {
								app.$toast(err.errMsg)
							}
							console.log('err', err)
						})
				} else {
					app.onSubmit()
				}
			},

			// 统计图片数量
			getImagesLength() {
				const {
					imageList
				} = this
				let imagesLength = 0
				imagesLength = imageList.length
				return imagesLength
			},

			// 提交到后端
			onSubmit() {
				const app = this
				
				app.formData.type=app.pickValue
				
				
				
				FeedbackApi.submit(app.formData)
					.then(result => {
						app.$toast(result.message)
						setTimeout(() => {
							app.disabled = false
							uni.navigateBack()
						}, 1500)
					})
					.catch(err => app.disabled = false)
			},

			// 上传图片
			uploadFile() {
				const app = this
				const {
					imageList
				} = app
				// 整理上传文件路径
				const files = []
				if (imageList.length) {
					const images = imageList.map(image => image)
					files.push({
						images
					})
				}

				// 批量上传
				return new Promise((resolve, reject) => {
					Promise.all(files.map((file, index) => {
							return new Promise((resolve, reject) => {
								UploadApi.image(file.images)
									.then(fileIds => {
										app.formData.uploaded = fileIds
										resolve(fileIds)
									})
									.catch(reject)
							})
						}))
						.then(resolve, reject)
				})
			},
			handPick(e) {
				this.numberIndex = e[0]
				this.pickValue = this.pickerList[this.numberIndex].label || ''
			}
		},
		onLoad() {

		},
	}
</script>

<style lang="scss">
	
	.image-list {
	  padding: 0 20rpx;
	  margin-top: 20rpx;
	  margin-bottom: -20rpx;
	
	  &:after {
	    clear: both;
	    content: " ";
	    display: table;
	  }
	
	  .image {
	    display: block;
	    width: 100%;
	    height: 100%;
	  }
	
	  .image-picker,
	  .image-preview {
	    width: 184rpx;
	    height: 184rpx;
	    margin-right: 36rpx;
	    margin-bottom: 36rpx;
	    float: left;
	
	    &:nth-child(3n+0) {
	      margin-right: 0;
	    }
	  }
	
	  .image-picker {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    border: 1rpx dashed #ccc;
	    color: #ccc;
	
	    .choose-icon {
	      font-size: 48rpx;
	      margin-bottom: 6rpx;
	    }
	
	    .choose-text {
	      font-size: 28rpx;
	    }
	  }
	
	  .image-preview {
	    position: relative;
	
	    .image-delete {
	      position: absolute;
	      top: -15rpx;
	      right: -15rpx;
	      height: 42rpx;
	      width: 42rpx;
	      background: rgba(0, 0, 0, 0.64);
	      border-radius: 50%;
	      color: #fff;
	      font-weight: bolder;
	      font-size: 22rpx;
	      z-index: 10;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	    }
	  }
	}
	.layout-feedback {
		padding: 36rpx 36rpx;
	}

	.feelback-box {
		height: auto;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.group {
		position: relative;
		padding: 20rpx 20rpx;

		.label {
			font-size: 34rpx;
			line-height: 52rpx;
			color: #101010;
		}

		.text {
			font-size: 36rpx;
			line-height: 52rpx;
			color: #415058;
		}

		.input {
			display: block;
			width: 100%;
			font-size: 36rpx;
			line-height: 52rpx;
			color: #415058;
			text-align: right;
		}
	}

	.centerbox {
		padding: 20rpx 20rpx;
	}

	.limit {
		font-size: 28rpx;
		color: #bebebe;
	}

	.upload-title {
		font-size: 34rpx;
		line-height: 52rpx;
		color: #101010;

		.xt {
			margin-left: 16rpx;
			font-size: 32rpx;
			color: #bebebe;
		}
	}

	.upload {
		margin-right: 36rpx;
		width: 150rpx;
		height: 150rpx;
	}

	.btnbox {
		margin: 60rpx auto 20rpx;
		width: 580rpx;
	}

	.feedback-btn {
		width: 580rpx;
		height: 100rpx;
		font-size: 32rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		border-radius: 50rpx;
		background-color:#0197f8;
		border-radius: 10rpx;
	}
	
</style>